<template>
	<view>
		<view>
			<view class="od-banner">
				<image class="od-banner-icon" src="/static/resource/images/od_bg_icon.png" mode="widthFix" />
				<view class="od-jd od-jd-0">
					<view class="od-jd-out">
						<view class="od-jd-in"></view>
					</view>
					<view class="vp-flex od-jd-text">
						<view class="vp-flex_1">
							<text class="od-jd-st-0">填写订单</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-10">在线支付</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-20">专人服务</text>
						</view>
						<view class="vp-flex_1">
							<text class="od-jd-st-30">服务完成</text>
						</view>
					</view>
				</view>
			</view>
			<view class="pub-box">
				<view class="pub-box-bd">
					<view class="weui-cell weui-cell_input">
						<!-- <view class="weui-cell__hd">
							<image class="serv-icon"
								:src="service.icon_image ? service.icon_image_url : '../../static/resource/images/avatar.jpg'">
							</image>
						</view> -->
						<view class="weui-cell__bd">
							<text class="serv-name">{{ service.title }}</text>
						</view>
						<view class="weui-cell__ft">
							<view class="f5 ic_info">服务内容</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<view class="pub-box">
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊医院</view>
							</view>
							<view class="weui-cell__bd">
								<input class="weui-input" name="receiveAddress" style="text-align: right"
									placeholder-class="vp-placeholder" placeholder="请填写要就诊的医院"
									v-model="form.hospital" />
							</view>
						</view>
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊时间</view>
							</view>
							<view class="weui-cell__bd"></view>
							<view class="weui-cell__ft weui-cell__ft_in-access">
								<view>
									<!-- <dtPicker @dtPickerChanged="onStartTimeChanged" :timestamp="form.serviceTime"
										placeholder="请选择期待服务时间"></dtPicker> -->
									<uni-datetime-picker type="datetime" v-model="form.serviceTime" />
								</view>
							</view>
						</view>
						<view class="weui-cell weui-cell_input" @click="onClientChange">
							<view class="weui-cell__hd">
								<view class="weui-label">就诊人</view>
							</view>
							<view class="weui-cell__bd"></view>
							<view class="weui-cell__ft weui-cell__ft_in-access">
								<view>
									<input class="weui-input" placeholder-class="vp-placeholder" placeholder="请选择就诊人"
										style="text-align: right;" :disabled="true" :value="patientName" type="text">
								</view>
							</view>
						</view>
						<view class="weui-cell weui-cell_input" @click="onAddressChange">
							<view class="weui-cell__hd">
								<view class="weui-label">地址</view>
							</view>
							<view class="weui-cell__bd"></view>
							<view class="weui-cell__ft weui-cell__ft_in-access">
								<view>
									<input class="weui-input" placeholder-class="vp-placeholder" placeholder="请选择地址"
										style="text-align: right;" :disabled="true" :value="address" type="text">
								</view>
							</view>
						</view>
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__hd">联系电话</view>
							<view class="weui-cell__bd">
								<input class="weui-input" type="number" name="tel" style="text-align: right"
									placeholder-class="vp-placeholder" placeholder="请填写您的联系电话" v-model="form.phone" />
							</view>
						</view>
					</view>
				</view>
				<view class="pub-box">
					<view class="pub-box-tt">服务需求</view>
					<view class="pub-box-bd">
						<view class="weui-cell weui-cell_input">
							<view class="weui-cell__bd">
								<textarea name="demand" auto-height placeholder="请简单描述您要就诊的科室.."
									placeholder-class="vp-placeholder" style="min-height: 150rpx"
									v-model="form.special" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 300rpx"></view>
			<!-- 悬浮提交按钮 -->
			<view class="vp-foot">
				<view style="background: #ffffff; padding: 20rpx">
					<view class="xieyi" style="text-align: center">
						<text :class="'is_xieyi ' + (is_xieyi ? 'is_xieyi_on' : '')"
							@click="onXieyiChange">我已阅读并同意</text>
						<navigator url="/pages/mine/index">《用户协议》</navigator>
						<text>和</text>
						<navigator url="/pages/mine/index">《服务协议》</navigator>
					</view>
					<view>
						<button :class="'btnp ' + (is_xieyi ? '' : 'btnp-disabled')" @click="submitOrder">
							确认下单
							<block v-if="form.amount > 0">（支付{{ form.amount }}元）</block>
						</button>
					</view>
				</view>
			</view>
			<!-- <uni-popup ref="popup" type="center" :is-mask-click="false" background-color="#fff">
				<view class="popup-content">
					<view class="group">
						<input class="uni-input" type="tel" v-model="form.phone" placeholder="手机号" />
					</view>
					<view class="group">
						<input class="uni-input" v-model="validCode" placeholder="验证码" />
						<text class="valid-text" @click="countdownChange">{{countdown.validText}}</text>
					</view>
				</view>
				<view class="btns">
					<view class="cancal" @click="cancal">取消</view>
					<view class="ok" @click="ok">确定</view>
				</view>
			</uni-popup> -->
		</view>
	</view>
</template>

<script>
	import {
		apiUrl
	} from '@/config/config.js';
	export default {
		components: {},
		data() {
			return {
				isLogin: true,
				apiUrl: apiUrl,
				validCode: '',//验证码
				serviceId: '',
				service: '',
				patientName: '',
				address: '',
				is_xieyi: false,
				form: {
					serviceId: '', // 服务id
					serviceTitle: '', // 服务标题
					serviceTime: '', // 服务时间
					special: '', // 备注，特殊要求
					hospital: '', // 医院
					userId: '', //客户id
					addressId: '', //地址id
					patientId: '', //患者id
					phone: '', // 联系方式
					amount: '' //金额
				}

			};
		},
		onLoad: function(option) {
			// console.log('测试')
			this.serviceId = option.id
			// 获取页面数据
			this.getsvcontents()
			this.form.userId = uni.getStorageSync('account_key')
		},

		methods: {
			submitOrder(){
				try {
					uni.request({
						url: this.apiUrl + '/api/order',
						data: this.form,
						method: 'Post',
						success: (res) => {
							if (res.data.code == '200') {
								uni.navigateTo({
									url: `/pages/index/buy/pay?orderNumber=${res.data.msg}`
								});
							} else {
				
							}
						}
					})
				
				} catch (e) {
					// error
				}
				
			},
			tocontent(id) {
				// console.log(id)
				uni.navigateTo({
					url: `/pages/index/svcontent/svcontent?id=${id}`
				});
			},
			//获取地址信息
			getsvcontents() {
				if (this.isLogin == true) {
					try {
						uni.request({
							url: 'http://localhost:8080/api/service/content/byId',
							data: {
								serviceId: this.serviceId,
							},
							method: 'GET',
							success: (res) => {
								if (res.data.code == '200') {
									this.service = res.data.data
									this.form.serviceId = this.serviceId
									this.form.serviceTitle = this.service.title
									this.form.amount = this.service.price
								} else {

								}
							}
						})

					} catch (e) {
						// error
					}
				}
			},

			onStartTimeChanged(e) {
				this.order.starttime = e.detail.value;
			},

			onXieyiChange() {
				// 阅读协议
				this.is_xieyi = true
			},
			onClientChange() {
				// 选择就诊人
				uni.navigateTo({
					url: '../../mine/patient/select-patient?act=select'
				})

				uni.$on('patient', (data) => {
					// console.log('监听到事件来自 update ，携带参数 msg 为：' + data.name);
					this.patientName = data.name;
					this.form.patientId = data.patientId;
				})
			},
			onAddressChange(){
				uni.navigateTo({
					url: '../../mine/address/address?act=select'
				})
				
				uni.$on('address', (data) => {
					this.address = data.province;
					this.form.addressId = data.addressId;
				})
			}
		},
	};
</script>

<style>
	@import './index.css';
</style>